<template lang="pug">
    div
        Table(border :columns="columns" :data="data")
        br
        br
        Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" :label-position="left")
            FormItem
                template(v-if="btnFlg")
                    Button(type="primary" style="margin-left:10px" @click="handleSubmit('formValidate')") 增加
                template(v-else)
                    Button(type="error" style="margin-left:10px" @click="editSave()") 保存修改
            FormItem(label="项目代号" prop="name_a")
                Row
                    Col(span="5")
                        Input(v-model="formValidate.name_a" placeholder="请输入代码" style="width:200px")
                    Col(span="5")
                        Input(v-model="formValidate.name_b" placeholder="请输入编号" style="width:200px")
            FormItem(label="商业权利" prop="cr")
                Input(v-model="formValidate.cr" placeholder="请输入商业权利" style="width:200px")
            FormItem(label="靶点" prop="target")
                Input(v-model="formValidate.target" placeholder="请输入靶点" style="width:200px")
            FormItem(
            v-for="(item, index) in formValidate.items"
            v-if="item.status"
            :key="index"
            :label="'阶段 ' + item.index")
                Row
                    Col(span="5")
                        Input(type="text" v-model="item.region" placeholder="请输入开发地区" style="width:200px")
                    Col(span="5")
                        Input(type="text" v-model="item.stage" placeholder="请输入临床阶段" style="width:200px")
                    template(v-if="item.index != 1")
                        Col(span="2" offset="1")
                            Button(type="ghost" @click="handleRemove(index)") Delete
            FormItem
                Row
                    Col(span="6")
                        Button(type="dashed" long @click="handleAdd" icon="plus-round") 添加阶段
            FormItem(label="合作方" prop="img")
                Upload(action="/api/imgUpload" :on-success="handleSuccess" :show-upload-list="false" :format="['jpg','jpeg','png']")
                    template(v-if="formValidate.img != ''")
                        img(type="ghost"  :src="'/public/img/' + formValidate.img" style="width:100px;height:100px;")
                    template(v-else)
                        Button(type="ghost" icon="ios-cloud-upload-outline") Upload Image
            FormItem(label="介绍" prop="introduce")
                //Input(v-model="formValidate.introduce" placeholder="请输入介绍" style="width:200px") 
                textarea(id="progressEditor")
</template>
<script>
import tinymce from "tinymce";
export default {
    data() {
        return {
            btnFlg: true,
            formValidate: {
                name_a: "",
                name_b: "",
                cr: "",
                items: [
                    {
                        region: "",
                        stage: "",
                        index: 1,
                        status: 1
                    }
                ],
                img: "",
                target: "",
                introduce: ""
            },
            index: 1,
            columns: [
                {
                    title: "项目代号",
                    key: "name",
                    align: "center"
                },
                {
                    title: "商业权利",
                    key: "cr",
                    align: "center"
                },
                {
                    title: "靶点",
                    key: "target",
                    align: "center"
                },
                {
                    title: "开发地区",
                    key: "region",
                    render: (h, params) => {
                        return h("div", this.f(h, params, "region"));
                    },
                    align: "center"
                },
                {
                    title: " 临床阶段",
                    key: "stage",
                    align: "center",
                    render: (h, params) => {
                        return h("div", this.f(h, params, "stage"));
                    }
                },
                {
                    title: "合作方",
                    key: "cImg",
                    align: "center",
                    render: (h, params) => {
                        return h("img", {
                            attrs: {
                                width: 80,
                                height: 80,
                                src: "/public/img/" + params.row.cImg,
                                style: "margin:5px"
                            }
                        });
                    }
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params);
                                        }
                                    }
                                },
                                "Edit"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params);
                                        }
                                    }
                                },
                                "Delete"
                            )
                        ]);
                    }
                }
            ],
            data: []
        };
    },
    methods: {
        f(h, params, field) {
            let length = params.row[field].length;
            let harray = [];
            for (let index = 0; index < length; index++) {
                harray.push(
                    h(
                        "div",
                        { attrs: { style: "padding:10px;" } },
                        params.row[field][index]
                    )
                );
                if (index != length - 1)
                    harray.push(
                        h("hr", {
                            attrs: {
                                style:
                                    "height:1px;background-color:#e9eaec;border:none;"
                            }
                        })
                    );
            }
            return harray;
        },
        handleAdd() {
            this.index++;
            this.formValidate.items.push({
                value: "",
                index: this.index,
                status: 1
            });
        },
        handleRemove(index) {
            this.formValidate.items.splice(index, 1);
        },
        handleSuccess(res) {
            this.formValidate.img = res.message.data.filename;
        },
        async handleSubmit(name) {
            this.formValidate.introduce = tinymce.activeEditor.getContent();
            var data = (await this.axios.post("/api/progressManagement", {
                data: this.formValidate
            })).data;
            var status = data.status;
            if (status) {
                this.$Message.success("Success!");
                var res = (await this.axios.get("/api/progressManagement")).data
                    .message.data;
                this.data = res;
            } else {
                this.$Message.error("Fail!");
            }
        },
        show(params) {
            this.btnFlg = false;
            this.formValidate.id = params.row.id;
            this.formValidate.name_a = params.row.name_a;
            this.formValidate.name_b = params.row.name_b;
            this.formValidate.cr = params.row.cr;
            var items = [];
            this.index = 0;
            for (let i = 0; i < params.row.region.length; i++) {
                items.push({
                    region: params.row.region[i],
                    stage: params.row.stage[i],
                    index: i + 1,
                    status: 1
                });
                this.index++;
            }
            this.formValidate.items = items;
            this.formValidate.img = params.row.cImg;
            this.formValidate.target = params.row.target;
            tinymce.activeEditor.setContent(params.row.introduce);
            //alert(JSON.stringify(params.row));
        },
        async editSave() {
            this.formValidate.introduce = tinymce.activeEditor.getContent();
            var data = (await this.axios.put("/api/progressManagement", {
                data: this.formValidate
            })).data;
            var status = data.status;
            if (status) {
                this.btnFlg = true;
                this.$Message.success("Success!");
                var res = (await this.axios.get("/api/progressManagement")).data
                    .message.data;
                this.data = res;
                this.formValidate = {
                    name_a: "",
                    name_b: "",
                    cr: "",
                    items: [
                        {
                            region: "",
                            stage: "",
                            index: 1,
                            status: 1
                        }
                    ],
                    img: "",
                    target: "",
                    introduce: ""
                };
                tinymce.activeEditor.setContent("");
            } else {
                this.$Message.error("Fail!");
            }
        },
        remove(params) {
            this.$Modal.confirm({
                title: "确认删除",
                content: "<p>确认删除吗？</p>",
                onOk: async () => {
                    var id = this.data[params.index].id;
                    await this.axios.delete("/api/progressManagement/" + id);
                    var res = (await this.axios.get("/api/progressManagement"))
                        .data.message.data;
                    this.data = res;
                    this.$Message.info("Clicked ok");
                },
                onCancel: () => {
                    this.$Message.info("Clicked cancel");
                }
            });
        }
    },
    async mounted() {
        var res = (await this.axios.get("/api/progressManagement")).data.message
            .data;
        this.data = res;
        tinymce.init({
            selector: "#progressEditor",
            branding: false,
            elementpath: false,
            height: 400,
            language: "zh_CN.GB2312",
            menubar: "edit insert view format table tools",
            theme: "modern",
            plugins: [
                "imageupload advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools",
                "searchreplace visualblocks visualchars code fullscreen fullpage",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons paste textcolor colorpicker textpattern imagetools codesample"
            ],
            convert_urls: false,
            imageupload_url: "/api/imgUploadEditor",
            toolbar1:
                " imageupload newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link emoticons media codesample",
            autosave_interval: "20s",
            image_advtab: true,
            table_default_styles: {
                width: "60%",
                borderCollapse: "collapse"
            }
        });
    },
    destroyed() {
        tinymce.get("progressEditor").destroy();
    }
};
</script>
